<template>
<el-container>
    <el-aside width="200px">
       <MemberMenu></MemberMenu>
    </el-aside>


<div class="formCss">
  
<el-form ref="journal" :model="journal" label-width="80px">
   <span style="font-size:20px;margin-left:120px;color:blue">企业任务反馈:</span>             
   <el-form-item  label="任务名称:"  class="type-input" prop="task">
                <el-select  v-model="journal.taskId" clearable placeholder="请选择任务反馈的名称">
                    <el-option v-for="task in tasks"  :key="task.id" :label="task.name" :value="task.id"></el-option>
                </el-select>   
                <span class="errCss">{{error.taskId}}</span> 
   </el-form-item>
   <el-form-item label="材料:" class="logo-input" prop="logo">
                <img style="max-width: 100px" :src="picSrc"/>
                <input type="file" ref="pic" @change="fileLoad">
            </el-form-item>
  <el-form-item label="任务反馈详情:" class="eventCss">
    <el-input ref="report"  v-model="journal.report"></el-input><span class="errCss">{{error.report}}</span>
  </el-form-item>
   
  <el-form-item>
      <div class="butCss">
        <el-button align="center" type="primary" @click="onSubmit">保存</el-button>
        <el-button align="center" type="primary" @click="cancel">取消</el-button>
     </div>
          
  </el-form-item>
</el-form>
</div>
  
</el-container>
</template>

<script>
import MemberMenu from '@/components/menu/MemberMenu.vue'
import instance from '@/utlis/request.js'


export default {
    
    components: {
        MemberMenu,
        
    },
  
    data() {
        
        return {
         journal:{
              report:"",
        },
        task:{
          id:"",
          name:""
        },
        taskId:"",
        pro: {
          id:"",
          name:"",
        }, 
        tasks:[],
        error:{
                report:"",
                taskId:"",
          },
           file:"",
        };
    },
     //钩子函数   一般用来初始化数据
    created:function(){
      this.initData();   
     
    },
     methods: {
       //显示页面所有的任务功能
       initData(){
        var companyUser=window.sessionStorage.getItem("companyUserId");
        var companyUserObj = JSON.parse(companyUser);
        instance.get("task/member/listCompany/"+companyUserObj).then(res=>{
          this.tasks=res.data.data;
        })
      },   
       //任务反馈的功能
      onSubmit() {
          //任务名称不能为空
          if(this.journal.taskId==undefined){
             this.error.taskId="任务反馈的名称不能为空";
             return;
          }else{
               this.error.taskId="";
          }
          //任务反馈详情格式判断
          if(this.journal.report==undefined||this.journal.report.trim()==""){
            this.error.report="任务反馈的详情不能为空";
            this.$refs.report.select();
            return;
          }else{
              this.error.report="";
          }
        var companyUser=window.sessionStorage.getItem("companyUserId");
        var companyUserObj = JSON.parse(companyUser);
        
        this.journal.companyUserId=companyUserObj  
        this.journal.taskId=this.journal.taskId;
        console.log("/////////////");
        console.log(this.journal.companyUserId);
        var file=this.$refs.pic.files[0]; 
         var formData = new FormData();
         formData.append("file",file);
            console.log(file);
         formData.append("report",this.journal.report);
         formData.append("taskId",this.journal.taskId);
         formData.append("companyUserId",this.journal.companyUserId);
          instance.post("journal/member/memberAdd",formData, {headers:{'content-type':'multipart/form-data'}}).then(res=>{
             this.$router.push({path:"/MemberTaskStatus"});
             alert("任务反馈成功");
          })
         
      },
      fileLoad:function(){
           this.picSrc='';
           //this.picFile=event.target.files[0];     
           this.picFile=this.$refs.pic.files[0];
           
           //检查类型
           var fileName = this.picFile.name;
           var dotIndex = fileName.lastIndexOf(".");
           //没有扩展名
           if(dotIndex==-1){
               this.$refs.pic.focus();
               return;
           }
           //取出扩展名
           /*var ext = fileName.substring(dotIndex+1);
           if(",jpg,jpeg,png,bif,webp,pdf".indexOf(","+ext.toLowerCase()+",")==-1){
               this.$refs.pic.select();
               return;
           }*/
           //图片预览
           /*var reader = new FileReader();
           reader.readAsDataURL(this.picFile);
            var that = this;
           reader.onload=function(e){
               that.picSrc=this.result;
           }*/
          
           //检查大小
           var fileSize = this.picFile.size;
           console.log(fileSize);
           if(fileSize>1024*1024*100){
               this.$refs.pic.select();
               return;
           }
       },
      //取消功能
      cancel(){
        this.$router.push({path:"/MemListView"});
      }

    }

}
</script>
<style scoped>
  
    
    .formCss{
          margin-left: 450px;
    }
    .errCss{
        color:red;
    }
     .eventCss{
      width: 300px;
    }
    .type-input{
      margin-top: 30px;
    }

   
</style>